<template>
	<layout :footer-visible="tabIdx == 0 && taskDetail.checkStatus == 0" footer-bg-color="#FFF2EF">
		<view class="nice-nav-2">
			<u-navbar title="任务详情" titleColor="#fff" backIconColor="#fff"></u-navbar>
			<view class="wrapper">
				<watermark-view :text="`ID: ${userInfo.id}`">
					<view class="header">
						<view @click="handleTabChange(idx)" v-for="item,idx in tabs" class="tab-item" :class="{'active': tabIdx == idx}">{{item.name}}</view>
					</view>
					<view v-show="tabIdx == 0" class="content">
						<view v-if="(!taskDetail.checkStatus || taskDetail.checkStatus == 0) && (!taskDetail.deadline || taskDetail.deadline >= Date.now())">
							<view class="h-box mg-b-sm">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_tripe.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">任务名称</text>
								<text class="value">{{taskDetail.title || ''}}</text>
							</view>
							<view v-if="taskDetail.assetDetail" class="mg-b-sm">
								<view class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_camera.png" width="40rpx" height="40rpx"></u-image>
									<text class="label">任务素材</text>
									<view class="value" @click="saveAssets">
										<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_xiazai_anniu@2x.png" width="40rpx" height="40rpx"></u-image>
									</view>
								</view>
								<view class="mg-t-xs" style="margin-left: 50rpx;">
									<uni-file-picker v-if="taskDetail.assetDetail.images && taskDetail.assetDetail.images.length" :value="taskDetail.assetDetail.images" readonly></uni-file-picker>
									<view class="mg-b-xs">
										<text>{{taskDetail.assetDetail.text}}</text>
										<u-icon @click="$copy(taskDetail.assetDetail.text)" name="file-text"></u-icon>
									</view>
								</view>
							</view>
							<view class="mg-b-sm">
								<view class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_note.png" width="40rpx" height="40rpx"></u-image>
									<text class="label">任务描述</text>
								</view>
								<view class="detail mg-t-xs">
									<jyf-parser :html="taskDetail.detail"></jyf-parser>
								</view>
							</view>
							<view class="mg-b-sm">
								<view class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_location.png" width="40rpx" height="40rpx"></u-image>
									<text class="label">店铺信息</text>
									<text class="value">{{taskDetail.storeInfo.name || ''}}</text>
								</view>
								<view class="wrapper-address h-box">
									<view class="flex-extend u-line-1">{{taskDetail.storeInfo.address}}</view>
									<view v-if="taskDetail.storeInfo.distance" class="h-box">
										<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_arrow_purple.png" width="26rpx" height="28rpx"></u-image>
										<text>{{formatDistance(taskDetail.storeInfo.distance)}}</text>
									</view>
								</view>
							</view>
							<view class="h-box mg-b-sm">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_clock.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">任务截止时间</text>
								<view v-if="taskDetail.deadline" class="value">
									<uni-dateformat :threshold="[0, 0]" :date="taskDetail.deadline"></uni-dateformat>
								</view>
								<view v-else class="value">无限制</view>
							</view>
							<view class="h-box mg-b-sm">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_rewards.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">任务奖励</text>
								<view class="value h-box">
									<view v-if="taskDetail.rewards" class="h-box">
										<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_coin@2x.png" width="38rpx" height="38rpx"></u-image>
										<text>+{{taskDetail.rewards || ''}}</text>
									</view>
									<view v-if="taskDetail.rewards2" class="h-box mg-l-xs">
										<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_packet.png" width="26rpx" height="32rpx"></u-image>
										<text>+{{taskDetail.rewards2 / 100}}</text>
									</view>
								</view>
							</view>
							<view class="mg-b-sm">
								<view class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_camera.png" width="40rpx" height="40rpx"></u-image>
									<text class="label">照片</text>
								</view>
								<view class="mg-t-xs" style="margin-left: 50rpx;">
									<uni-file-picker v-model="taskDetail.medias" :readonly="taskDetail.checkStatus != 0"></uni-file-picker>
								</view>
							</view>
							<view class="detail">
								<view v-if="taskDetail.checkStatus == 0">
									<u-input v-model="taskDetail.notes" :auto-height="false" height="140" type="textarea" :maxlength="250" placeholder="写一点备注吧……"></u-input>
								</view>
								<view v-else>{{taskDetail.notes}}</view>
							</view>
						</view>
						<view v-else-if="taskDetail.checkStatus == 1" class="v-box pad-t-base pad-l-base pad-r-base">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_audit_pending.png" width="226rpx" height="234rpx"></u-image>
							<view class="h-box mg-t-base">
								<text style="font-size: 32rpx;font-weight: 500;color: #333333;">资料提交成功</text>
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_check_on.png" width="30rpx" height="30rpx"></u-image>
							</view>
							<text style="text-align: center;color: #666666;font-size: 24rpx;">工作人员会在1个工作日内审核您的提交，敬请留意历史审核！</text>
						</view>
						<view v-else-if="taskDetail.checkStatus == 2" class="v-box pad-t-base pad-l-base pad-r-base">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_audit_pass.png" width="226rpx" height="234rpx"></u-image>
						</view>
						<view v-else-if="taskDetail.deadline < Date.now()" class="v-box pad-t-base pad-l-base pad-r-base">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_expired.png" width="226rpx" height="234rpx"></u-image>
						</view>
						<view v-else-if="taskDetail.checkStatus == -1" class="v-box">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_audit_reject.png" width="226rpx" height="234rpx"></u-image>
							<text class="text-red mg-b-base">{{taskDetail.checkMsg || ''}}</text>
							<view class="btn-commit" @click="taskDetail.checkStatus = 0">重新提交</view>
						</view>
						<view v-else-if="taskDetail.checkStatus == 3" class="v-box">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_audit_pending_2.png" width="226rpx" height="234rpx"></u-image>
							<text class="text-warn mg-b-xs">{{taskDetail.checkMsg || ''}}</text>
							<view class="btn-commit" @click="taskDetail.checkStatus = 0">继续提交</view>
						</view>
					</view>
					<view v-show="tabIdx == 1" class="content">
						<u-time-line>
							<u-time-line-item v-for="item,idx in timeline" :key="idx">
								<template v-slot:node>
									<view>
										<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dot_shadow.png" width="28rpx" height="28rpx"></u-image>
									</view>
								</template>
								<template v-slot:content>
									<view>
										<view class="h-box">
											<text class="timeline-title flex-extend">{{item.title}}</text>
											<view class="timeline-time">
												<uni-dateformat :threshold="[0,0]" :date="item.time"></uni-dateformat>
											</view>
										</view>
										<view v-if="item.msg" class="timeline-msg">{{item.msg}}</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</watermark-view>
			</view>
		</view>
		<view slot="footer" class="h-box justify-center pad-t-sm pad-b-sm">
			<view class="h-fill pad-l-base pad-r-base">
				<view v-if="taskDetail.checkStatus == 0 && (!taskDetail.deadline || taskDetail.deadline >= Date.now())" class="flex-v align-center">
					<text v-if="taskDetail.enableCheckLocation" class="tips">tips:定位在店铺附近200m以内才能</text>
					<view class="btn-commit" @click="handleCommit">提交</view>
				</view>
				<!-- <view v-else-if="taskDetail.checkStatus == 1" class="v-box">已提交，待审核</view>
				<view v-else-if="taskDetail.checkStatus == 2" class="v-box">审核通过，奖励已发放</view>
				<view v-else-if="taskDetail.checkStatus == -1" class="v-box">
					<text class="status-tag" :class="[statusClass()]">未通过</text>
					<text class="text-red mg-b-base">{{taskDetail.checkMsg || ''}}</text>
					<view class="btn-commit" @click="taskDetail.checkStatus = 0">重新提交</view>
				</view>
				<view v-else-if="taskDetail.checkStatus == 3" class="v-box">
					<text class="status-tag" :class="[statusClass()]">待进一步提交</text>
					<text class="text-red mg-b-xs">{{taskDetail.checkMsg || ''}}</text>
					<view class="btn-commit" @click="taskDetail.checkStatus = 0">继续提交</view>
				</view> -->
			</view>
		</view>
		<u-modal v-model="modalOpenSetting" cancel-text="取消" :show-cancel-button="true" :show-title="false"
			content="请先打开保存到相册开关">
			<view slot="confirm-button" class="h-box justify-center v-fill">
				<u-button @click="modalOpenSetting = false" open-type="openSetting"
					:custom-style="{color: 'transparent'}" hover-class="none">
					<view class="text-dark">去设置</view>
				</u-button>
			</view>
		</u-modal>
	</layout>
</template>

<script>
	import {
		saveImages
	} from "../common/maUtil.js"
	import util from "../common/util"
	import {
		mapState,
		mapActions
	} from 'vuex'
	const statusDic = {
		'0': '待完成',
		'1': '待审核',
		'2': '已完成',
		'3': '审核中',
		'-1': '未通过'
	}
	const marketingTask = uniCloud.importObject('marketingTask')
	export default {
		data() {
			return {
				statusDic,
				taskDetail: {
					medias: [],
					notes: '',
					checkStatus: 0,
					checkMsg: '',
					storeInfo: {},
					checkRecords: []
				},
				modalOpenSetting: false,
				tabs: [{
					name: '当前任务'
				}, {
					name: '历史审核'
				}],
				tabIdx: 0,
				activeItemStyle: {
					border: '1px solid #FF7D66',
				},
				timeline: []
			}
		},
		computed: {
			...mapState(['userInfo']),
			
		},
		onLoad(e) {
			this.taskDetail.detailId = e.taskId
			this.loadData()
		},
		methods: {
			...mapActions(['getCurrRegion']),
			formatDistance: util.formatDistance,
			handleTabChange(idx) {
				this.tabIdx = idx
			},
			statusClass() {
				if (!this.taskDetail.checkRecords) {
					if (this.taskDetail.deadline < Date.now()) {
						return 'status-expired'
					}
					return 'status-init'
				} else {
					let r = this.taskDetail.checkRecords[this.taskDetail.checkRecords.length - 1]
					if (r.checkStatus != 2 && this.taskDetail.deadline < Date.now()) {
						return 'status-expired'
					}
					if (r.checkStatus == 1 || r.checkStatus == 3) {
						return 'status-pending'
					} else if (r.checkStatus == 2) {
						return 'status-pass'
					} else if (r.checkStatus == 0) {
						return 'status-init'
					} else if (r.checkStatus == -1) {
						return 'status-reject'
					}
				}
			},
			async loadData() {
				try {
					// let [err, res] = await uni.getLocation({
					// 	type: 'gcj02'
					// })
					// console.log('getLocation', res, err)
					// if (!err) {
					// 	this.userLocation = {
					// 		latitude: res.latitude,
					// 		longitude: res.longitude
					// 	}
					// }
					let data = await this.getCurrRegion()
					this.userLocation = data.userLocation
					this.taskDetail = await marketingTask.getUserTaskDetail(this.taskDetail.detailId, this.userLocation)
					if (this.taskDetail.assetDetail) {
						this.taskDetail.assetDetail.images = this.taskDetail.assetDetail.images.map(url => {
							return {
								url
							}
						})
					}
					let list = []
					if (this.taskDetail.checkRecords) {
						let n = this.taskDetail.checkRecords.length
						for (var i = this.taskDetail.checkRecords.length - 1; i >= 0; i--) {
							let item = this.taskDetail.checkRecords[i]
							if (item.checkStatus == 2) {
								list.push({
									title: `审核通过`,
									time: item.checkTime
								})
							} else if (item.checkStatus == 3) {
								list.push({
									title: `等待进一步提交`,
									time: item.checkTime,
									msg: item.checkMsg
								})
							} else if (item.checkStatus == -1) {
								list.push({
									title: `审核未通过`,
									time: item.checkTime,
									msg: item.checkMsg
								})
							}
							list.push({
								title: `第${n--}次提交`,
								time: item.commitTime
							})
						}
					}
					this.timeline = list
				} catch(e){
					console.error(e)
				}
			},
			async handleCommit() {
				try {
					if ((!this.taskDetail.medias || !this.taskDetail.medias.length) && !this.taskDetail.notes) {
						this.$toast('请上传至少一张图片或写点备注！')
						return
					}
					
					await marketingTask.commit(this.taskDetail.detailId, this.taskDetail.medias, this.taskDetail.notes, this.userLocation)
					this.loadData()
					this.getOpenerEventChannel().emit('changed')
				} catch(e){
					console.error(e)
				}
			},
			async saveAssets() {
				uni.showLoading({
					mask: true
				})
				try {
					await saveImages(this.taskDetail.assetDetail.images.map(item => {
						return item.url
					}))
					uni.hideLoading()
					this.$copy(this.taskDetail.assetDetail.text, null, '')
					this.$toast('图片保存成功，文本已复制！')
				} catch (e) {
					uni.hideLoading()
					if ('未授权' === e) {
						this.modalOpenSetting = true
					} else {
						this.$showError(e)
					}
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #FFF2EF;
	}
</style>
<style lang="scss" scoped>
	
	.wrapper {
		background-image: url(https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/bg_task_detail@2x.png);
		background-size: 100% 100%;
		width: calc(100% - 40rpx);
		height: 1400rpx;
		margin: 30rpx auto 0 auto;
		
		.header {
			height: 88rpx;
			border-bottom: 1rpx dashed #E3BCBC;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx;
			padding-top: 10rpx;
			
			.tab-item {
				height: 52rpx;
				border-radius: 28rpx;
				border: 2rpx solid #999999;
				line-height: 52rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
			.tab-item.active {
				border-color: #FF7D66;
				color: #E54428;
			}
			.tab-item:not(:last-child) {
				margin-right: 30rpx;
			}
		}
		.content {
			padding: 30rpx 50rpx 30rpx 50rpx;
			overflow-y: auto;
			max-height: 1260rpx;
		}
		
		.label {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			margin-left: 10rpx;
		}
		
		.value {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align: right;
		}
		
		.detail {
			margin-left: 50rpx;
			padding: 20rpx;
			min-height: 200rpx;
			background-color: #ababab33;
			border-radius: 12rpx;
			overflow-y: auto;
		}
		
		.wrapper-address {
			margin-left: 50rpx;
			background-color: #a191ff40;
			padding: 0 20rpx;
			margin-top: 10rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 12rpx;
		}
	}
		
	.tips {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #FE7446;
		line-height: 48px;
	}
	.btn-commit {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-image: linear-gradient(to right, #FD5C47, #FF9F43);
		width: 100%;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
	}

	.timeline-msg {
		background: #F5F5F5;
		border-radius: 12rpx;
		padding: 20rpx;
		min-height: 200rpx;
		margin-top: 20rpx;
	}
	.timeline-title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}
	.timeline-time {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}
	
	::v-deep .file-picker__box-content {
		background-color: #9280ff26;
		border: 0 !important;
		.icon-add {
			background-color: #C4C1FF;
		}
	}
	::v-deep uni-textarea {
		height: 160rpx !important;
	}
	.status-tag {
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 22rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 0 20rpx;
	}
	.status-pass {
		background: #FF7D66;
	}
	.status-reject {
		background: #FF7D66;
	}
	.status-pending {
		background: rgba(255,159,67,0.22);
		border: 2rpx solid #FF9F43;
		color: #FF9F43;
	}
	.status-expired {
		color: #A4A4A4;
	}
	.status-init {
		background: rgba(255, 125, 102, 0.30);
		border: 2rpx solid #FF7D66;
		color: #E54428;
	}
</style>
